<template>
  <view class="page-container">
    <u-navbar back-icon-color="#5489bb" title="领箱反馈" title-color="#5489bb" :background="{
					background: '#FFF',
				}">
    </u-navbar>

    <view class="content">
      <view class="box-count">
        <span class="received">已领箱数:{{ received }}</span>
        <span class="unReceived">待领箱数:{{ unReceived }}</span>
      </view>
      <view class="serach-view">
        <u-search shape="square"
                  v-model="query"
                  height="80"
                  @search="search"
                  input-align="center"
                  :show-action="false"
                  :placeholder='placehoder'></u-search>
      </view>

      <view class="scroll-box" v-if="boxList.length">
        <view class="all-confirm">
          <m-checkbox :value="received === boxList.length" @input="allChecked">全选</m-checkbox>
        </view>
        <view class="box-list">
          <view class="box " v-for="g in group">
            <view class="box-num">
              <span style="margin-right: 20rpx;">{{ g.ch }}</span>
            </view>
            <view class="horizontal-box" v-for="b in g.list">
              <text :class="{checked:b.checked}">{{ b.XH }} — {{ b.PBH }}</text>
              <m-checkbox :value="b.checked" @input="changeValue(b,$event)" checked-color="#000"></m-checkbox>
            </view>
          </view>
          <view class="safe-area-inset-bottom"></view>
        </view>
      </view>
      <view class="search-empty" v-if="searchResult && !boxList.length">
        <p>没有搜索到该选项</p>
        <u-button size="mini" :custom-style="buttonStyle" @click="showPopup">添加</u-button>
      </view>
    </view>

    <uni-popup ref="popup" type="center" :safe="false">
      <view class="form-body">
        <view class="form-item">
          <view class="label">车号</view>
          <view class="input">
            <input v-model="boxForm.CH"/>
          </view>
        </view>
        <view class="form-item">
          <view class="label">箱号</view>
          <view class="input">
            <input v-model="boxForm.XH"/>
          </view>
        </view>
        <view class="form-item">
          <view class="label">篷布号</view>
          <view class="input">
            <input v-model="boxForm.PBH"/>
          </view>
        </view>
        <view class="footer">
          <u-button size="mini" :custom-style="{...buttonStyle,backgroundColor: '#b42626'}" @click="hidePopup">取消
          </u-button>
          <u-button size="mini" :custom-style="{...buttonStyle}" @click="addBox(boxForm)">保存</u-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UNavbar from "../../uview-ui/components/u-navbar/u-navbar";
import USearch from "../../uview-ui/components/u-search/u-search";
import MCheckbox from "../../components/m-checkbox";
import { addBox, getBoxList, updateBoxStatus, updateReturnStatus } from "../../api/task";
import UButton from "../../uview-ui/components/u-button/u-button";
import UInput from "../../uview-ui/components/u-input/u-input";
import { formatDateStr } from "../../utils/util";

export default {
  components: {
    UInput,
    UButton,
    MCheckbox,
    USearch,
    UNavbar
  },
  data() {
    return {
      query: '',
      placehoder: '搜索标题',
      boxList: [],
      id: '',
      searchResult: false,
      buttonStyle: {
        color: '#FFFFFF',
        backgroundColor: '#5f8ab4',
        border: 'none',
        borderRadius: '10rpx',
        marginTop: '20rpx'
      },
      boxForm: {
        XH: '',
        PBH: '',
        CH: ''
      }
    }
  },
  methods: {
    formatDateStr: formatDateStr,
    async allChecked() {
      uni.showLoading({
        title: "正在加载"
      })

      await updateBoxStatus({
        ID: this.boxList.filter((e) => !e.checked).map((item) => item.ID).join(';'),
        ZT: '已领'
      })
      await this.fetchData()
      uni.hideLoading()
    },
    async addBox(boxForm) {
      uni.showLoading({
        title: '正在添加'
      })

      if (boxForm.CH === '') {
        uni.showToast({
          icon: 'none',
          title: '请填写车号'
        })
        return
      }
      if (boxForm.XH === '') {
        uni.showToast({
          icon: 'none',
          title: '请填写箱号'
        })
        return
      }
      if (boxForm.PBH === '') {
        uni.showToast({
          icon: 'none',
          title: '请填写篷布号'
        })
        return
      }

      const { code, data, msg } = await addBox({
        INSTANCEID: this.id,
        ...boxForm
      })
      if (code === 0) {
        await this.fetchData()
        this.hidePopup()
      }
      uni.hideLoading()
    },
    hidePopup() {
      this.$refs.popup.close()
      this.boxForm = {
        XH: '',
        PBH: '',
        CH: ''
      }
    },
    showPopup() {
      this.$refs.popup.open()
    },
    search() {
      this.fetchData()
    },
    async changeValue(item, e) {
      console.log(item);
      uni.showLoading({
        title: "正在加载"
      })
      console.log(e);
      const { data } = await updateBoxStatus({
        ID: item.ID,
        ZT: e ? '已领' : '未领'
      })
      await this.fetchData()
      uni.hideLoading()
      console.log(data);
    },
    async fetchData() {
      uni.showLoading({
        title: "正在加载"
      })

      const { data } = await getBoxList({
        INSTANCEID: this.id,
        QUERY: this.query
      })
      this.boxList = data.map(e => {
        e.checked = e.ZT === '已领'
        return e
      });
      this.searchResult = this.query !== ''
      uni.hideLoading()
    }
  },
  computed: {
    received() {
      return this.boxList.filter(e => e.checked).length
    },
    unReceived() {
      return this.boxList.filter(e => !e.checked).length
    },
    group() {
      const group = {}
      this.boxList.forEach(e => {
        if (group.hasOwnProperty(e.CH)) {
          group[e.CH].push(e)
        } else {
          group[e.CH] = [ e ]
        }
      })
      return Object.keys(group).map(key => {
        let checkCount = group[key].filter(e => e.checked).length
        return {
          ch: key,
          sort: checkCount === group[key].length ? 1 : 0,
          list: group[key]
        }
      }).sort((o1, o2) => o1.sort - o2.sort)
    },
  },
  async onLoad(options) {
    this.id = options.id
    await this.fetchData()
  }
}
</script>

<style lang="less">
.page-container {
  display: flex;

  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0;

    .box-count {
      text-align: center;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 20rpx 0;

      span {
        flex: 1;

        &.unReceived {
          color: #a62b2b;
        }
      }
    }

    .serach-view {
      padding: 20rpx;
    }

    .scroll-box {
      overflow: auto;
      flex: 1;

      .box-list {
        /*height: 100%;*/

        .box {
          .checked {
            color: #000;
          }

          color: #a62b2b;
          margin: 0 20rpx 20rpx;
          background-color: rgb(242, 242, 242);
          padding: 20rpx 80rpx;
          border-radius: 10rpx;
          line-height: 1.8;

          .horizontal-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }

    .search-empty {
      text-align: center;
    }
  }

  .form-body {
    .form-item {
      position: relative;
      padding: 10rpx;
      display: flex;
      border-bottom: 1px solid #e6e6e6;

      .label {
        line-height: 40rpx;
        border-right: 1rpx solid #e6e6e6;
        font-weight: bold;
        text-align: right;
        width: 32%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding-right: 20rpx;
        justify-content: flex-end;
      }

      .input {
        flex: 1;
        height: auto;
        display: flex;
        align-items: center;
        border-radius: 5rpx;
        padding: 10rpx 10rpx;

        textarea, input, .uni-input {
          width: 100%;
        }
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-bottom: 20rpx;
    }
  }

  .all-confirm {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    padding: 0rpx 40rpx 20rpx;
  }
}
</style>
